<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>简易留言板</title>
    <script src="../../vue.js"></script>
    <script src="../../vue-resource.js"></script>
    <style>
        .box-message{
            width: 500px;
            padding: 20px;
            margin: 0 auto;
            border: 1px solid #eaeaea;
            box-shadow: 0px 5px 2px rgba(0,0,0,.1);
            /*text-align:center;*/
        }
        textarea{
            width: 100%;
            height: 200px;
            resize:none;
        }
        .btn{
            width: 100px;
            height: 40px;
            background-color: #2aabd2;
            color: #ffff00;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
            border: none;
            cursor: pointer;
            outline: none;
        }
        .answer-list{
            width: 500px;
            /*box-shadow: 5px 5px 5px rgba(0,0,0,.4);*/
            border:1px solid red;
        }
    </style>
</head>
<body>
    <div id="boxMessage" class="box-message">
        <textarea v-model="t1"></textarea>
        <input type="button" value="提交评论" :class="{btn:true}" @click="add()">
        <span>(可按enter回复)</span>
        <!--已留言-->
        <div class="answer-list">
            <p class="answer-list-title">留言列表</p>
            <p v-show="msgData.length==0">暂无留言。。。。。。</p>
            <div class="answer-list-con" :data-id="item.id" v-for="item in msgData">
                <p>{{item.content}}</p>
                <p>
                    <a href="javascript:void(0);">点赞：{{item.like}}</a>
                    <a href="javascript:void(0);">观看：{{item.watch}}</a>
                    <a href="javascript:void(0);">删除</a>
                </p>
            </div>
        </div>
    </div>
    <script>
        window.onload = function () {
            var URL = 'weibo.php';
            new Vue({
                el:'#boxMessage',
                data:{
                    t1:'',
                    msgData:[]
                       /* [{
                        content:'好啊红啊红啊好',
                        like:0,
                        watch:10,
                        ref:4,
                        id:12
                    }],*/
                },
                methods:{
                    add:function () {
                        //发送请求,默认是get
                        this.$http({
                            url:URL,
                            data:{//后台发送数据
                                act:'add',
                                content:this.t1
                            }
                        }).then(function (res) {
                            var json = res.data;
//                            msgData用于展示后台返回的数据
                            this.msgData.unshift({
                                content:this.t1,
                                time:json.item,
                                id:json.id,
                                like:0,
                                watch:10
                            });
//                            点击添加留言后textarea清空
                            this.t1 = "";
                        });
                    },
                    getPage:function (n) {

                    }
                },

            })
        }
    </script>
</body>
</html>